<template>
  <div>

    <h3>柱状图和饼图7</h3>

    <div class="box" ref="box"></div>

  </div>
</template>

<script>
var echarts = {};
export default {
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
      tableData: [],
      tableDataList: [],
      timeLong: "",
      startTime: "",
      endTime: "",
      maxVal: 20,
    };
  },
  mounted() {
    let me = this;
    setTimeout(() => {
      //   me.init();
      this.$bus.on("resize", (val) => {
        this.myChart.resize ? this.myChart.resize() : "";
      });
      this.$bus.on("barAndPieData", (val) => {
        me.tableData = val;
        me.echartsDataInit();
      });
    }, 120);
  },
  methods: {
    //echartsDataInit 图表数据初始化
    echartsDataInit() {
      let me = this;
      let startTime,
        endTime = 0;
      me.tableData.map((item, index) => {
        let stTime = me
          .$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS")
          .valueOf();
        let edTime = me
          .$moment(item.endTime, "YYYY-MM-DD HH:mm:ss.SSS")
          .valueOf();
        if (index == 0) {
          startTime = stTime;
          endTime = edTime;
        }
        if (index > 0) {
          if (startTime > stTime) {
            startTime = stTime;
          }
          if (endTime < edTime) {
            endTime = edTime;
          }
        }
        me.startTime = startTime;
        me.endTime = endTime;
      });
      let time = me.$moment(endTime).diff(me.$moment(startTime));

      // time = me.getTimeVal(time);
      me.timeLong = time;
      me.init();
    },
    getTimeVal(val) {
      let time = "";
      let me = this;
      let hour = me.$moment.utc(val).hour();
      let minute = me.$moment.utc(val).minute();
      let second = me.$moment.utc(val).second();
      let millisecond = me.$moment.utc(val).millisecond();

      hour ? (time += hour + "小时") : "";
      minute ? (time += minute + "分") : "";
      if (second && millisecond) {
        time += second + "." + millisecond + "秒";
      } else if (second && !millisecond) {
        second ? (time += second + "秒") : "";
      } else if (!second && millisecond) {
        time += "0." + millisecond + "秒";
      } else {
        time = val;
      }

      return time;
    },
    init() {
      let me = this;
      if (me.tableData && me.tableData.length == 0) {
        return;
        false;
      }
      let box = this.$refs.box;
      echarts = this.$echarts;
      let myChart = this.$echarts.init(box);
      var scale = 1;
      var rich = {
        title: {
          color: "#eee",
          align: "center",
        },
        abg: {
          backgroundColor: "#333",
          width: "100%",
          align: "right",
          height: 25,
          borderRadius: [4, 4, 0, 0],
        },
        weatherHead: {
          width: 40,
          color: "#333",
          height: 24,
          align: "left",
        },
        hr: {
          borderColor: "#777",
          width: "100%",
          borderWidth: 0.5,
          height: 0,
        },
        value: {
          width: 50,
          height: 32,
          color: "#ffc72b",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 18,
        },
        red: {
          width: 50,
          height: 32,
          color: "red",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 20,
        },
        valueHead: {
          color: "#333",
          width: 50,
          height: 24,
          padding: [0, 20, 0, 30],
          align: "center",
        },
        rate: {
          width: 50,
          height: 32,
          fontSize: 18,
          color: "#49dff0",
          align: "right",
          padding: [0, 20, 0, 30],
        },
        rateHead: {
          color: "#333",
          width: 50,
          height: 24,
          align: "center",
          padding: [0, 20, 0, 30],
        },
      };
      let option = {
        color: ["#2D79E9", "#67C23A", "#7FAE90"],
        tooltip: [
          {
            trigger: "axis",
            showContent: true,
            axisPointer: {
              type: "shadow",
            },
            textStyle: { width: 400 },
            formatter: function (params) {
              if (params && params.length > 0) {
                let str = "任务名称: XXXXXX" + "</br>";
                // console.log("params", params);
                let subTimeVal = 0;
                if (params[0].name.indexOf("步骤") > -1) {
                  let index = params[0].dataIndex;
                  let tabName = me.tableData[index - 1].name;
                  str = "步骤名称:  " + tabName + "</br>";
                }
                let longVal = 0;
                for (var i = 0; i < params.length; i++) {
                  // console.log("params[i]", params[i]);
                  if (params[i].seriesName == "实际提交时间") {
                    subTimeVal = params[i].value;
                  }

                  let tar = params[i];

                  let name = tar.seriesName;
                  let newName = tar.data.name;
                  let marker = tar.marker;
                  let value = tar.value;
                  // debugger;
                  if (newName) name = newName + " " + tar.seriesName;
                  if (name && value && value - 0 > 0) {
                    longVal += value - 0;
                    str +=
                      "<div style='display:flex;justify-content:space-between'><span>" +
                      marker +
                      name +
                      " : </span>" +
                      "<span>" +
                      me.getTimeVal(value) +
                      "</span>" +
                      "</div>";
                  }
                }
                str +=
                  "<div style='display:flex;justify-content:space-between'><span>" +
                  "运行耗时" +
                  " : </span>" +
                  "<span>" +
                  me.getTimeVal(longVal) +
                  "</span>" +
                  "</div>";
                let bili = (subTimeVal / longVal).toFixed(4) * 100;
                let css = "";
                if (bili > me.maxVal) {
                  css = "font-size:18px;color:red;font-weight:bold";
                }
                str +=
                  "<div style='display:flex;justify-content:space-between;'><span>" +
                  "等待时间占比" +
                  " : </span>" +
                  "<span style='" +
                  css +
                  "'>" +
                  bili +
                  "%</span>" +
                  "</div>";

                return str;
              }
            },
          },
        ],

        legend: {
          show: true,
        },
        grid: [
          {
            // top: 85,
            // width: "90%",
            // height: 140,
            // bottom: "75%",
            // left: 60,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            // type: "value",
            // boundaryGap: [0, 0.01],
            // name: "单位：毫秒",
            show: false,
          },
        ],
        yAxis: {
          show: false,
        },
        selectedMode: "single",
        series: [
          {
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "Search Engine" },
              { value: 775, name: "Direct" },
              { value: 679, name: "Marketing", selected: true },
            ],
          },
        ],
      };
      option = me.setOption(option);
      myChart.setOption(option, true);
      // localStorage.setItem("222", JSON.stringify(option));
      this.myChart = myChart;
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 2,
        dataIndex: 1,
      });
    },
    setOption(option) {
      let me = this;
      let noShowVal = [0]; //隐藏显示位置
      let subTimeVal = [300]; //提交时间数值
      let runTimeVal = [0]; //运行时间数值

      //option.series 循环3次存入隐藏显示、提交时间、运行时间 三个类型样式
      option.series.push({
        name: "",
        type: "bar",
        stack: "Total",
        barWidth: "100%",
        data: [],
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
        emphasis: {
          itemStyle: {
            borderColor: "transparent",
            color: "transparent",
          },
        },
        label: {
          show: false,
        },
      });
      let nameList = ["实际提交时间", "步骤运行时间"];
      for (var i = 0; i < 2; i++) {
        option.series.push({
          name: nameList[i],
          type: "bar",
          stack: "Total",
          barWidth: "100%",
          emphasis: {
            focus: "series",
          },
          data: [],
          label: {
            formatter: function (params, ticket, callback) {
              let value = params.value;
              let time = me.getTimeVal(value);
              if (value && value != "0") {
                return time;
              } else {
                return "";
              }
            },
            color: "#333",
            position: "inside",
            show: true,
          },
        });
      }

      //给对应类型容器存入数据
      me.tableData.map((item, index) => {
        // let startTimeName = "实际提交时间";
        // let runTimeName = "步骤运行时间";
        let startTime,
          runTime = 0;
        let arr = [0];
        option.series[0].data[index + 1] = 0;

        startTime = me
          .$moment(
            me.$moment(item.startTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          )
          .diff(me.$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf());
        runTime = me
          .$moment(
            me.$moment(item.endTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          )
          .diff(
            me.$moment(item.startTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          );
        // console.log("setOption", startTime);
        // console.log("setOption", runTime);
        let startFlag = false;
        //判断是否是最初开始步骤
        if (item.subTime == me.startTime) {
          startFlag = true;
          noShowVal[index + 1] = 0;
        } else {
          //非初始增加等待时间
          let chaVal =
            me.$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf() -
            me.startTime;
          noShowVal[index + 1] = chaVal;
        }

        subTimeVal[index + 1] = startTime; //提交时间数值
        runTimeVal[index + 1] = runTime;
      });
      option.series[1].data = noShowVal;
      option.series[2].data = subTimeVal;
      option.series[3].data = runTimeVal;

      let taskObj = option.series[0];
      option.series.splice(0, 1);
      option.series.push(taskObj);
      return option;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 300px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
.bl {
  display: flex;
  justify-content: space-between;
}
.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.titleDiv {
  display: flex;
  justify-content: space-between;
  padding: 0 100px 0 30px;
}
.info {
  position: relative;
  /* height: 40px; */
}
.info i {
  /* position: absolute;
  top: -40px;
  right: 100px; */
  font-size: 22px;
  color: #4f8adf;
}
</style>
